<template>
    <!-- 签到组件 -->
    <!-- 组件类型: 106 -->
    <div class="vy-cmp-signin">
        <div class="vy-cmp-signin-container">
            <div class="vy-cmp-signin-form">
                <a-form>
                    <a-form-item>
                        <a-row>
                            <a-col :span="3">
                                <span>签到地址</span>&nbsp;<span style="color: red;">*</span>
                            </a-col>
                            <a-col :span="10">
                                <a-input placeholder="请输入签到地址" v-model="formData.address"/>
                            </a-col>
                            <a-col :span="10">
                                <a-button type="primary" class="search-btn" @click="searchBmap">搜索</a-button>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="3">
                                您选择的签到地址：
                            </a-col>
                            <a-col :span="10">
                                {{formData.chName}}{{formData.coordinate}}
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-form-item>
                        <a-row>
                            <a-col :span="3">&nbsp;</a-col>
                            <a-col :span="20">
                                <baidu-map class="map" style="display: flex; height:350px; flex-direction: column"
                                           :scroll-wheel-zoom="true"
                                           :zoom="15"
                                           :center="bmap.bmampcenter"
                                           :auto-viewport="true"
                                >
                                    <!-- 定位控件 -->
<!--                                    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"-->
<!--                                                    :autoLocation="true"></bm-geolocation>-->
                                    <!-- 比例尺控件 -->
<!--                                    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>-->
                                    <!-- 标记点 -->
                                    <bm-marker v-for="(point, index) in bmap.markPoints"
                                               :position="point.location" :dragging="true"
                                               :key="index" @click="setPoint(point)"
                                    >
                                        <bm-label :content="point.name" :labelStyle="{color: 'red'}"
                                                  :offset="{width: -35, height: 30}"/>
                                    </bm-marker>
                                    <!-- 地图视图 -->
                                    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
                                </baidu-map>
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-form-item>
                        <a-row>
                            <a-col :span="3">
                                <span>签到规则</span>
                            </a-col>
                            <a-col :span="20">
                                <a-checkbox :checked="formData.openLocation" @change="click_change">启用地理位置防作弊功能
                                </a-checkbox>
                                <span style="color:rgba(186,183,183,1);">（此位置100米才可以签到成功哦）</span>
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-form-item class="vy-form-footer">
                        <a-button type="primary" @click="click_save_info">保存更改</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script>
import QS from "qs";
import JSONP from "axios-jsonp";

const CMP_TYPE = 106; // 组件类型
export default {
  name: "vy-cmp-signin",
  data() {
    return {
      bmap: {
        bmampcenter: "北京", // 地图中心，默认北京
        markPoints: [] // 查询出来的标记点
      },
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        moduleType: CMP_TYPE,
        openLocation: true, // 签到规则: 启用地理位置防作弊功能
        address: "", // 搜索地址
        coordinate: "", // 选中的地理坐标
        chName: "" //选中的中文名称
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.formData.address) {
        // 后端返回了地址，将值传给地图中心字段
        this.bmap.bmampcenter = this.formData.address;
      }
      // 转换 签到规则
      this.formData.openLocation = !!this.formData.openLocation;
    });
  },
  methods: {
    // 启用地理位置防作弊功能
    click_change(e) {
      this.formData.openLocation = e.target.checked;
    },
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    // 创建/更新内容组件
    saveInfo() {
      let params = Object.assign({}, this.formData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId(), // 主题Id
        openLocation: this.formData.openLocation ? 1 : 0
      });
      this.$axios.post("/subassembly/save", params).then(res => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
    // 检索地址
    searchBmap() {
      this.bmap.bmampcenter = this.formData.address;
      let url = "http://api.map.baidu.com/place/v2/search?";
      let pms = {
        query: this.formData.address,
        ak: window.BAIDU_MAP_KEY, // 在主入口处设置的全局变量
        region: "上海",
        output: "json"
      };
      this.$axios({
        type: "GET",
        url: url + QS.stringify(pms),
        headers: {
          referer: "http://api.map.baidu.com",
          host: "api.map.baidu.com",
          Origin: "api.map.baidu.com",
          "Access-Control-Allow-Credentials": true,
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET",
          "Access-Control-Allow-Headers": "application/json",
          contentType: "application/javascript;charset=utf-8",
          "X-Content-Type-Options": "nosniff"
        },
        adapter: JSONP
      }).then(res => {
        //先让地图联动

        // 标注出点
        this.bmap.markPoints = []; // 清空上一次的标记
        // 将搜索出来的点标注到地图上
        var points = res.results || [];
        points.forEach(point => {
          this.bmap.markPoints.push(point);
        });
        if (points.length) {
          // 设置默认坐标为第一项
          this.setPoint(points[0]);
        }
      });
    },
    // 点击标注 设置坐标点；
    setPoint(point) {
      console.log(point);
      let _location = point.location || {};
      let lng = _location.lng; // 经度
      let lat = _location.lat; // 纬度
      this.formData.coordinate = `${lng},${lat}`;
      this.formData.chName = point.address;
    }
  }
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-signin {
  width: 100%;
  height: 100%;
  background: #ffffff;

  .vy-cmp-signin-form {
    .search-btn {
      margin-left: 15px;
      background: rgba(51, 102, 255, 1);

      &:hover {
        background: rgba(51, 102, 255, 0.8);
      }
    }
  }

  .vy-form-footer {
    text-align: center;
    margin-bottom: 0;

    .ant-btn {
      padding: 0 100px;

      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);

        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }

        &[disabled] {
          background: #f5f5f5;

          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
